<script setup lang="ts">

/**
  任何一个事件都有对应的事件对象
  事件对象: 描述这个事件的

  1) 如果没有实参传递, 则直接定义形参接收
  2) 如果有实参传递, 实参用$event, 形参用e
 */
const toggle1 = (e: MouseEvent) => {
  console.log('点击了', e);
}

const toggle2 = (e: MouseEvent, str: string) => {
  console.log(str, e)
}
</script>

<template>
  <div class="app-page">
    <button @click="toggle1">切换1</button>
    <button @click="toggle2($event, '张三')">切换2</button>
  </div>
</template>

<style lang="css" scoped>
.box {
  width: 100px;
  height: 100px;
  background-color: pink;
}
</style>
